<template>
  <div>
    <aside class="w-64 bg-white shadow-md h-screen fixed left-0 top-0 overflow-y-auto">
      <div class="p-5 border-b">
        <h2 class="text-xl font-bold text-blue-600">就业信息系统</h2>
      </div>
      <nav class="p-4">
        <ul class="space-y-2">
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/index">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-tachometer-alt mr-2"></i>
                首页总览
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/stu">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-user-graduate mr-2"></i> 学生管理
                </span>
                <span v-if="dataCount.XSSL&&isShowData > 0" class="badge">{{ dataCount.XSSL }}</span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/job">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-briefcase mr-2"></i> 就业信息
                </span>
                <span v-if="dataCount.GWS&&isShowData > 0" class="badge">{{  dataCount.GWS}}</span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/xxl">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-comment-dots mr-2"></i> 消息

                </span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/teacher">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                  <i class="fas fa-chalkboard-teacher mr-2"></i> 教师管理
                </span>
                <span v-if="dataCount.JSS&&isShowData > 0" class="badge">  {{ dataCount.JSS }}</span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/dwgl">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                  <i class="fas fa-building mr-2"></i> 单位管理
                </span>
                <span v-if="dataCount.DWS&&isShowData > 0" class="badge">  {{ dataCount.DWS }}</span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/Zph">
            <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                <i class="fas fa-handshake mr-2"></i>招聘会管理
                </span>
                <span v-if="dataCount.ZPHS&&isShowData > 0" class="badge">  {{ dataCount.ZPHS }}</span>
              </a>
            </router-link>
          </li>
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/admin/XsjlGl">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-file-alt mr-2"></i>  学生简历管理
                </span>
                <span v-if="dataCount.XSJLS&&isShowData > 0" class="badge">  {{ dataCount.XSJLS }}</span>
              </a>
            </router-link>
          </li>


          <li class="hover:bg-blue-50 rounded cursor-pointer" @click="toggleStatsMenuXiaoYuanOpen">
            <a class="flex items-center p-2 text-gray-700">
              <i class="fas fa-clipboard-list mr-2"></i>
              工作
              <i :class="{'fas fa-chevron-down': !isStatsMenuXiaoYuanOpen, 'fas fa-chevron-up': isStatsMenuXiaoYuanOpen}"
                 class="ml-auto"></i>
            </a>
          </li>
          <ul v-show="isStatsMenuXiaoYuanOpen" class="pl-4 space-y-2">
            <li class="hover:bg-blue-50 rounded relative">
              <router-link to="/admin/JobShView">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                 <i class="fas fa-check-circle mr-2"></i> 岗位审核
                </span>
                  <span v-if="dasJobCount> 0&&isShowData" class="badge">  {{ dasJobCount }}</span>
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded relative">
              <router-link to="/admin/noPassJob">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                 <i class="fas fa-times-circle  mr-2"></i> 未通过岗位
                </span>
                  <span v-if="dataCount.SHBTGS> 0&&isShowData" class="badge">  {{ dataCount.SHBTGS }}</span>
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/zpgggl">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                 <i class="fas fa-bullhorn mr-2"></i> 公告栏管理
                </span>
                  <span v-if=" dataCount.ZPGGS > 0&&isShowData" class="badge">  {{  dataCount.ZPGGS  }}</span>
                </a>
              </router-link>
            </li>
          </ul>


          <li class="hover:bg-blue-50 rounded cursor-pointer" @click="toggleStatsMenuQiTaOpen">
            <a class="flex items-center p-2 text-gray-700">
              <i class="fas fa-tools mr-2"></i>
              系统设置
              <i :class="{'fas fa-chevron-down': !isStatsMenuXiTongOpen, 'fas fa-chevron-up': isStatsMenuXiTongOpen}"
                 class="ml-auto"></i>
            </a>
          </li>
          <ul v-show="isStatsMenuXiTongOpen" class="pl-4 space-y-2">
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/sysUseradmin">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-user-cog mr-2"></i>
                  系统用户管理
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/xtgg">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-bell mr-2"></i>
                  系统公告
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/csxg">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-sliders-h mr-2"></i>
                  系统参数配置
                </a>
              </router-link>
            </li>
<!--            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/stats/logs">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-user-shield mr-2"></i>
                  用户权限管理
                </a>
              </router-link>
            </li>-->
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/jcsj">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-database mr-2"></i>
                  基础数据配置
                </a>
              </router-link>
            </li>
          </ul>


          <li class="hover:bg-blue-50 rounded cursor-pointer" @click="toggleStatsMenu">
            <a class="flex items-center p-2 text-gray-700">
              <i class="fas fa-th-large mr-2"></i>
              其他管理
              <i :class="{'fas fa-chevron-down': !isStatsMenuQiTaOpen, 'fas fa-chevron-up': isStatsMenuQiTaOpen}"
                 class="ml-auto"></i>
            </a>
          </li>
          <ul v-show="isStatsMenuQiTaOpen" class="pl-4 space-y-2">
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/msgl">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-comments mr-2"></i>
                  面试管理
                </a>
              </router-link>
            </li>
<!--            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/stats/graduates">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-file-signature mr-2"></i>
                  简历管理
                </a>
              </router-link>
            </li>-->
<!--            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/stats/logs">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-users-class mr-2"></i>
                  班级管理
                </a>
              </router-link>
            </li>-->
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/zpjz">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-file-contract mr-2"></i>
                  招聘简章管理
                </a>
              </router-link>
            </li>
<!--            <li class="hover:bg-blue-50 rounded">
              <router-link to="/admin/stats/logs">
                <a class="flex items-center p-2 text-gray-700">
                  <i class="fas fa-book-open mr-2"></i>
                  专业管理
                </a>
              </router-link>
            </li>-->
          </ul>
          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <a @click="RedirectToHome" class="flex items-center p-2 text-gray-700" id="logout-button">
              <i class="fas fa-home mr-2"></i>
              返回首页
            </a>
          </li>
          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <a id="logout-button" class="flex items-center p-2 text-gray-700" @click="LoginOutOK">
              <i class="fas fa-sign-out-alt mr-2"></i>
              退出登录
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <div v-if="visible" class="popup-overlay" @click="closePopup">
      <div class="popup" @click.stop>
        <h2 class="popup-title">{{ title }}</h2>
        <p class="popup-message">{{ message }}</p>
        <button class="popup-button" @click="closePopup">关闭</button>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {EventBus} from "@/event-bus";

export default {
  name: "AdminMenu",
  data() {
    return {
      showModal: false,
      title: '',
      dasJobCount: 0, // 岗位审核的数字徽章
      message: '',
      visible: false,
      isStatsMenuQiTaOpen: true, // 控制统计分析子菜单的展开状态
      isStatsMenuXiaoYuanOpen: true,// 控制校园信息管理子菜单的展开状态
      isStatsMenuXiTongOpen: true, // 控制系统设置子菜单的展开状态

      dataCount: {
        XSSL: 0,     // 学生数量
        XSJLS: 0,    // 学生简历数
        DWS: 0,      // 单位数
        GWS: 0,      // 岗位数
        ZPHS: 0,     // 招聘会数
        JSS: 0,      // 教师数
        XTGGS: 0,    // 系统公告数
        MSS: 0,       // 面试数
        ZPGGS: 0,    // 招聘公告数
        SHBTGS: 0,    // 审核不通过数
      },
      isShowData: false, // 是否显示岗位审核菜单
      UserInfo: {
        id: '',
        name: '',
        role: '',
        username: '',
      },
    }
  },
  mounted() {
    this.getLoginUserInfo();
    this.getAllJob();
  },
  methods: {
    async getLoginUserInfo() {
      this.isLoading = true;
      try {
        const response = await axios.get('/user/checkSession');
        if (!response.data.result) {
          EventBus.$emit('show-auth-popup');
          setTimeout(() => {
            this.$router.push({name: 'DwLoginView'});
          }, 1000);
        } else {
          console.log('登录成功-----！');
          this.UserInfo.name = response.data.name;
          this.UserInfo.role = response.data.role;
          this.UserInfo.username = response.data.username;
          this.getParams();
        }
      } catch (error) {
        EventBus.$emit('show-auth-popup');
        console.error('获取用户信息失败,网络错误！', error);
        setTimeout(() => {
          this.$router.push({name: 'DwLoginView'});
        }, 1000);
      }
    },
    // 获取参数
    getParams() {
      axios.post('/config/getSemsConfigByIds',
          [25] ,
          { headers: { 'Content-Type': 'application/json' } }
      ).then(response => {
        this.isShowData = response.data.find(item => item.id === 25).value==="是";
        if(this.isShowData){
          this.getData();
        };
      }).catch(error => {
        this.$message.error('获取配置信息失败，请联系管理员');
      });
    },
    getData(){
      // 获取系统数量
      axios.get("/data/getSystemDataCount",{params:{YHM:this.UserInfo.username,YHSFDM:1}}).then(res => {
        if (res.data.result) {
          this.dataCount.XSSL = res.data.data.XSSL;
          this.dataCount.XSJLS = res.data.data.XSJLS;
          this.dataCount.DWS = res.data.data.DWS;
          this.dataCount.GWS = res.data.data.GWS;
          this.dataCount.ZPHS = res.data.data.ZPHS;
          this.dataCount.JSS = res.data.data.JSS;
          this.dataCount.XTGGS = res.data.data.XTGGS;
          this.dataCount.MSS = res.data.data.MSS;
          this.dataCount.ZPGGS = res.data.data.ZPGGS;
          this.dataCount.SHBTGS= res.data.data.SHBTGS;
        } else {
          this.$message.error("获取系统数量失败:"+res.data.msg);
        }
      }).catch(err => {
        this.$message.error("获取系统数量失败！:"+err.message);
      });
    },
    // 获取待shej审核的岗位数据
    getAllJob() {
      this.loading = true;
      axios.get(`/dataGwdmk/getDshJobdata?YHM=-1&YHSFDM=${1}`).then(res => {
        if (res.data.result) {
          this.dasJobCount = res.data.data.length;
        } else {
          this.$message.error("获取岗位数据失败！，后台错误");
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
        this.$message.error("获取岗位数据失败！，网络错误");
      });
    },
    toggleStatsMenuQiTaOpen() {
      this.isStatsMenuXiTongOpen = !this.isStatsMenuXiTongOpen; // 系统设置子菜单的展开状态
    },
    toggleStatsMenu() {
      this.isStatsMenuQiTaOpen = !this.isStatsMenuQiTaOpen; // 切换子菜单的展开状态
    },
    toggleStatsMenuXiaoYuanOpen() {
      this.isStatsMenuXiaoYuanOpen = !this.isStatsMenuXiaoYuanOpen; // 切换子菜单的展开状态
    },
    confirmLogout() {
      axios.get("/user/logout").then((response) => {
        if (response.data.result) {
          this.$router.push({name: 'Login'});
        } else {
          this.title = '错误';
          this.message = '退出登录失败，请稍后再试';
          this.visible = true;
        }
      }).catch((error) => {
        console.log(error);
        this.title = '错误';
        this.message = '退出登录失败，请稍后再试';
        this.visible = true;
      });
      this.showModal = false;
    },
    closePopup() {
      this.visible = false;
      this.$router.push({name: 'Login'});
    },
    RedirectToHome() {
      this.$router.push({name: 'index'});
    },
    LoginOutOK() {
      $.confirm({
        title: '💀 温馨提示',
        content: '<strong style="color:red;font-size:18px;">⚠️你确定要退出登录吗？</strong>',
        type: 'red',
        animation: 'rotate',
        closeAnimation: 'rotate',
        animateFromElement: false,
        boxWidth: '450px',
        useBootstrap: false, // 自定义宽度时需要关闭 Bootstrap 模式
        theme: 'modern', // ✅ 使用更轻量的主题以避免遮罩太重
        buttons: {
          毁灭吧: {
            text: '💣 坚决执行',
            btnClass: 'btn-red',
            action: () => {
              axios.get("/user/logout").then((response) => {
                if (response.data.result) {
                  this.$router.push({name: 'Login'});
                } else {
                  this.title = '错误';
                  this.message = '退出登录失败，请稍后再试';
                  this.visible = true;
                }
              }).catch((error) => {
                console.log(error);
                this.title = '错误';
                this.message = '退出登录失败，请稍后再试';
                this.visible = true;
              });
            }
          },
          我要活着: {
            text: '😱 撤销操作',
            btnClass: 'btn-default',
            action: () => {
              console.log("用户选择了理智退出");
            }
          }
        }
      });
      /* $.confirm({
         title: '提示',
         content: '确认退出登录吗！',
         type: 'orange', // warning 样式
         buttons: {
           确定: {
             btnClass: 'btn-orange',
             action:  ()=> {
               axios.get("/user/logout").then((response) => {
                 if (response.data.result) {
                   this.$router.push({name: 'Login'});
                 } else {
                   this.title = '错误';
                   this.message = '退出登录失败，请稍后再试';
                   this.visible = true;
                 }
               }).catch((error) => {
                 console.log(error);
                 this.title = '错误';
                 this.message = '退出登录失败，请稍后再试';
                 this.visible = true;
               });
             }
           },
           取消:  ()=> {

           }
         }
       });*/
    }
  }
}
</script>

<style>
.badge {
  background-color: #f4f2f2; /* Tailwind 的 red-500 */
  color: black;
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  border-radius: 9999px; /* full */
  padding: 0.25rem 0.5rem;
  margin-left: auto;
  line-height: 1;
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
  box-shadow: 0 0 0 2px white;
  transition: all 0.2s ease-in-out;
}

/* 增强弹窗体验的样式 */
.fixed {
  position: fixed;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.3s ease;
}

.popup {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: fadeIn 0.3s;
}

.popup-title {
  margin: 0 0 10px;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

.popup-message {
  margin-bottom: 20px;
  font-size: 1em;
  color: #666;
}

.popup-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s;
}

.popup-button:hover {
  background-color: #0056b3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*--------------信息弹窗-样式end*/
</style>
